<template>
  <el-row v-if="!hidden"
          :class="['yv-toolbar', calcClass, isFlat?'yv-toolbar-flat':'']"
          :style="calcStyleAndWidth">
    <el-divider v-if="isFooterToolbar"></el-divider>
    <div :class="['yv-field-container',alignRight?'to-right':'']">
      <template v-for="(item,itemIdx) in items" :key="itemIdx">
        <component :is="getRuntimeCmp(item.cmpTag)"
                   :vjson="item"
                   :vcxt="vcxt"
                   :dialog-scope="dialogScope"
                   :parent-list="vjson.items"
                   :index-of-parent-list="itemIdx"
                   :parent-component="vjson"/>
      </template>
    </div>
  </el-row>
</template>

<script>
import _ from 'lodash'
import {getRuntimeCmp} from '../../../runtime/CmpStore'
import WebVjsonMix from "../WebVjsonMix"
import ToolbarMeta from "./ToolbarMeta";

export default {
  mixins: [WebVjsonMix],
  data() {
    const vjson = ToolbarMeta.loadVjsonWithDefault(this)

    return {
      disabled: vjson.disabled,
      items: vjson.items,
      alignRight: vjson.alignRight,
      isFlat: vjson.isFlat,
      isFooterToolbar: vjson.isFooterToolbar,
    }
  },
  methods: {}
}
</script>
<style lang="less">
.yv-toolbar .to-right {
  justify-content: right;
}

.yv-toolbar > .yv-field-container {
  width: 100%;

  .yv-staticfield {
    .el-form-item__label {
      margin-top: 3px
    }
  }
}

.el-dialog > .el-dialog__body {
  padding-bottom: 0 !important;
}

.el-dialog .el-dialog__footer > .yv-toolbar > .el-divider {
  margin: 0 0 15px 0;
}

.yv-toolbar.yv-toolbar-flat {
  border: 0px solid rgba(170, 170, 170, .75);

  .el-button {
    height: 40px;
    padding: 8px;
    border: none;
    border-radius: 0;
    background-color: transparent;

    &.is-disabled, &.el-button--default.is-disabled, &.el-button--primary.is-disabled,
    &.el-button--danger.is-disabled, &.el-button--success.is-disabled, &.el-button--warning.is-disabled {
      color: var(--el-toolbar-button-disabled-text-color);
      background-color: transparent;
      border-color: transparent;

      & > span {
        color: var(--el-toolbar-button-disabled-text-color);
      }
    }

    &:focus {
      outline: 1px dashed rgba(170, 170, 170, .75);
    }

    &.el-button--primary {
      color: var(--el-color-primary);

      & > span {
        color: black;
      }

      &:active, &:focus, &:hover {
        background-color: #c5c5c5; // var(--el-color-primary-light-9);
        color: var(--el-color-primary);
      }
    }

    &.el-button--danger {
      color: var(--el-color-danger);

      & > span {
        color: black;
      }

      &:active, &:focus, &:hover {
        background-color: #c5c5c5; // var(--el-color-danger-light-9);
        color: var(--el-color-danger);
      }
    }

    &.el-button--default {
      color: var(--el-color-primary);

      & > span {
        color: black;
      }

      &:active, &:focus, &:hover {
        background-color: #c5c5c5;
        color: var(--el-color-primary);
      }
    }

    &.el-button--success {
      color: var(--el-color-success);

      & > span {
        color: black;
      }

      &:active, &:focus, &:hover {
        background-color: #c5c5c5; // var(--el-color-success-light-9);
        color: var(--el-color-success);
      }
    }

    &.el-button--warning {
      color: var(--el-color-warning);

      & > span {
        color: black;
      }

      &:active, &:focus, &:hover {
        background-color: #c5c5c5; // var(--el-color-warning-light-9);
        color: var(--el-color-warning);
      }
    }

    &.el-button--info {
      color: var(--el-color-primary);

      & > span {
        color: black;
      }

      &:active, &:focus, &:hover {
        background-color: #c5c5c5; // var(--el-color-warning-light-9);
        color: var(--el-color-primary);
      }
    }
  }

  .input-item-wrap:not(.yv-staticfield) {
    .yv-form-label {
      line-height: 40px;
      font-size: 14px;
    }
  }
}
</style>